<template>
  <div class="artlist-container">
    <h2>我是ArtList组件</h2>
    <p>{{ count }}</p>
    <button @click="count++">+1</button>
  </div>
</template>

<script>
export default {
  data: () => ({
    count: 100,
  }),
  // 1. beforeCreate 里面几乎什么都做不了，因为此时 data 数据、methods都没有准备好
  beforeCreate() {
    console.log("子：1.beforeCreate", this.count);
  },
  // 2. created 里面可以使用 data、methods等等
  created() {
    console.log("子：2.created", this.count);
  },
  // 3. beforeMount 里面还不能进行DOM操作，因为页面还没有渲染呢
  beforeMount() {
    console.log("子：3.beforMount", document.querySelector("h2"));
  },
  // 4. mounted 里面可以进行DOM操作了（此时页面已经渲染完毕）
  mounted() {
    console.log("子：4.mounted", document.querySelector("h2"));
  },
  // 5.beforeUpdate
  beforeUpdate() {
    console.log("子：5.beforeUpdate", this.count, this.$refs);
  },
  // 6.updated
  updated() {
    console.log("子：6.updated", this.count, this.$refs);
  },
  // 7.beforeDestroy
  beforeDestroy() {
    console.log("子：7.beforeDestroy", this.$refs.artlistRef);
  },
  // 8.destroyed
  destroyed() {
    console.log("子：8.destroyed", this.$refs.artlistRef);
  },
  beforeUnmount() {
    console.log("子：7.beforeUnmount", this.$refs);
  },
  unmounted() {
    console.log("子：8.unmounted", this.$refs);
  },
};
</script>

<style lang="less" scoped>
.artlist-container {
  background-color: pink;
  margin: 5px;
  padding: 10px;
}
</style>
